<template>
  <div class="container2">
    <span>
      {{ title }}
    </span>
    <span class="num">
      {{ num }}
    </span>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    num: String,
  },
  name: "",
  data() {
    return {};
  },
  methods: {},
};
</script>
<style scoped>
.container2 {
  width: 100%;
  display: flex;
  height: 2em;
  justify-content: space-between;
  align-items: center;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.num {
  width: fit-content;
  height: 1.8em;
  background-color: rgb(245, 245, 245);
  text-align: center;
  border-radius: 0.5em;
  line-height: 1.8em;
  padding-left: 0.2em;
  padding-right: 0.2em;
}
.container2:hover {
  background-color: rgb(245, 245, 245);
}
</style>